<!DOCTYPE html>
<!-- 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.1.1
Version: 2.0.2
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<!--<![endif]-->
<!-- BEGIN HEAD -->
<!-- BEGIN BODY -->
<style>
/*table{margin:0px !important; font-size: 18px;}
table td{border-top: none !important; padding-left:30px !important;}
table tr td:first-child{border-right:1px solid #f0f0f0; padding-right:30px !important; width:100px; text-align:center}
table .fa-caret-up{color:#2ec81c; font-size: 18px}
table .fa-caret-down{color:#eb3d3e; font-size: 18px;}
table .spacing-1{
	height: 80px;
}*/
.tab-content .st-2{display: block;margin-top: 1.2%}
.tab-content .st-2 h3{font-family: Microsoft Yahei, 'Open Sans', sans-serif; text-align: center;}
.tab-content .st-2 .ca{display: inline-block;width: 49.4%;}
.tab-content .st-2 .cb{float:right;display: inline-block;width: 49.4%;}
.tab-content .st-3 {display: block;background: #fff;margin-top: 0.9%;padding: 25px;}
.tab-content .st-3 .title {display: block;padding-left: 30px;color: #029ece;font-size: 18px;height: 60px;line-height: 60px;border-bottom: 1px solid #e1e8ee; overflow: hidden;}
.tab-content .st-3 .title .cc_time {
height: 30px;
display: block;
line-height: 30px;
font-size: 14px;
float: right;
margin-top: 20px;
}
.cc_btn{ height:70px; line-height:57px; float:left;}
.cc_btn a{ text-decoration:none; display:inline-block; color:#1e1e47;cursor:pointer;padding: 0 40px;}
.cc_btn .a_selected{ color:#08467f; border-bottom: 2px solid #08467f;}
.last_big{ font-size:18px; color:#333333; display:inline-block; margin-top:-5px;}
.cc_time{ height:30px; line-height:30px; font-size:14px; float:right; margin-top:20px}
.cc_time *{ display:inline-block}
.cc_time button,.show_time{ float:left; margin-right:20px;}
.cc_time button{outline:none;
border: 0;
width: 30px;
height: 30px;
background-position: 50% 50%;}
.cc_time .J-Time-Left{ background: url('./assets/img/p_left.png');}
.cc_time .J-TimeTime-Right{ background: url('./assets/img/p_right.png');}
.page-content{
    padding:15px 15px 0;
}
.st-2 .ca,.st-2 .cb{
	background-color: #fff;
	
}
.wraping{
	padding-left: 0;
	padding-right: 0;
}
</style>
<body class="page-header-fixed">
<div class="tab-content">
<div class="tab-pane active" id="tab_1_1">
<!--<div style="background-color: #fff;padding-top: 15px">
	<product-table-report>
	</product-table-report>
</div>-->
<!--<section class="st-2">
<div class="ca">
<h3 style="color:#009fcd;">电站实时状态总览</h3>
<div id="allStation" style="height:400px; padding:0px 20px;">
	
</div>
</div>
<div class="cb">
<h3 style="color:#009fcd;">电桩实时状态总览</h3>
<div id="allChargePile" style="height:400px; padding:0px 20px;">
	全部电桩实时状态统计数据
</div>
</div>
</section>-->

<!--收入与支出-->
<div class="content-model">
	<div class="model-title">
		<span class="title-left">收入与支出</span>
		<span class="title-right">INCOME AND SPENDING</span>
	</div>
	<div class="model-content">
		<div class="income-model">
			<div class="model-head">
				<div class="fl">
					<p class="income-title"><i ng-bind='incomeTitle'>本月收入</i><span>¥<i ng-bind='statisticsData.income'>0</i></span></p>
					<p class="total-income mt10">总收益：¥<span ng-bind="totalIncome">0</span></p>
				</div>
				<div class="fr">
					<input type="text" ng-model="income_startDate" name="income_startDate" ng-change="getIncomeByDate()" class="income-date getTime" /> ~
					<input type="text" ng-model="income_endDate" name="income_endDate" ng-change="getIncomeByDate()" class="income-date getTime" />
				</div>
			</div>
			<div style="width: 100%; height: 400px;">
				<div id="allIncome" style=" width: 100%; height: 400px;"></div>
			</div>
		</div>
		<div class="spending-model">
			<div class="model-head">
				<div class="fl">
					<p class="spending-title"><i ng-bind='outcomeTitle'>本月支出</i><span>¥<i ng-bind='statisticsData.outcome'>0</i></span></p>
					<p class="total-income mt10">总支出：¥<span ng-bind="totalOutcome">0</span></p>
				</div>
				<div class="fr">
					<input type="text" ng-model="outcome_startDate" name="outcome_startDate" ng-change="getOutcomeByDate()" class="spending-date getTime" /> ~
					<input type="text" ng-model="outcome_endDate" name="outcome_endDate" ng-change="getOutcomeByDate()" class="spending-date getTime" />
				</div>
			</div>
			<div style="width: 100%; height: 400px;">
				<div id="allSpending" style=" width: 100%; height: 400px;">
					
				</div>
			</div>
		</div>
	</div>
</div>
<!--电桩数据-->
<div class="content-model">
	<div class="model-title">
		<span class="title-left">设备数据</span>
		<span class="title-right">ELECTRIC PILE DATA</span>
	</div>
	<div class="model-content">
		<div class="electricPile-model">
			<div class="model-head">
				<p class="electricPile-title">充电设备统计总览</p>
				<p class="total-electricPile mt10">充电设备枪口数：<span ng-bind='statisticsData.chargerTotal'></span></p>
			</div>
			<div class="electricPile-content1" style=" height: 240px;">
				<div class="electricPile-current-month">
					<p class="electricPile-current-title">本月</p>
					<ul class="electricPile-current-list">
						<li>
							<p>数量</p>
							<p>
								<span class="color-green58"><i ng-bind='statisticsData.thisMonthChargerNo'>0</i>个</span>
								<span class="green-bar" style="width: {{thisMonthChargerNoPercent}};"></span>
							</p>
						</li>
						<li>
							<p>新增</p>
							<p>
								<span class="color-bluee9"><i ng-bind='thisMonthAddNo'>0</i>个</span>
								<span class="blue-bar" style="width: {{thisMonthAddNoPercent}};"></span>
							</p>
						</li>
						<li>
							<p>预约</p>
							<p>
								<span class="color-orange34"><i ng-bind='statisticsData.thisMonthBespeakNo'>0</i>次</span>
								<span class="orange-bar" style="width: {{thisMonthBespeakNoPercent}};"></span>
							</p>
						</li>
						<li>
							<p>充电</p>
							<p>
								<span class="color-deepbule"><i ng-bind='statisticsData.thisMonthChargeNo'>0</i>次</span>
								<span class="deepbule-bar" style="width: {{thisMonthBespeakNoPercent}};"></span>
							</p>
						</li>
					</ul>
				</div>
				<img src="assets/img/electricPile-img-1.jpg" class="electricPile-img-1" />
				<div class="electricPile-last-month">
					<p class="electricPile-last-title">上月</p>
					<ul class="electricPile-last-list">
						<li>
							<p>数量</p>
							<p>
								<span class="green-bar" style="width: {{lastMonthChargerNoPercent}};"></span>
								<span class="color-green58"><i ng-bind='statisticsData.lastMonthChargerNo'></i>个</span>
							</p>
						</li>
						<li>
							<p>新增</p>
							<p>
								<span class="blue-bar" style="width: {{lastMonthAddNoPercent}};"></span>
								<span class="color-bluee9"><i ng-bind='lastMonthAddNo'></i>个</span>
							</p>
						</li>
						<li>
							<p>预约</p>
							<p>
								<span class="orange-bar" style="width: {{lastMonthBespeakNoPercent}};"></span>
								<span class="color-orange34"><i ng-bind='statisticsData.lastMonthBespeakNo'></i>次</span>
							</p>
						</li>
						<li>
							<p>充电</p>
							<p>
								<span class="deepbule-bar" style="width: {{lastMonthChargeNoPercent}};"></span>
								<span class="color-deepbule"><i ng-bind='statisticsData.lastMonthChargeNo'></i>次</span>
							</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="model-head">
				<p class="electricPile-title">电站统计总览</p>
				<p class="total-electricPile mt10">电站总数：<span ng-bind='statisticsData.stationTotal'>0</span></p>
			</div>
			<div class="electricStation">
				<p>运营中 <span class="green-bar" style="width: {{operationNoPercent}};"></span> <span class="color-green58"><i ng-bind='statisticsData.operationNo'>0</i></span></p>
				<p>安装中 <span class="blue-bar" style="width: {{makingNoPercent}};"></span> <span class="color-bluee9"><i ng-bind='statisticsData.makingNo'>0</i></span></p>
				<p>规划中 <span class="orange-bar" style="width: {{planningNoPercent}};"></span> <span class="color-orange34"><i ng-bind='statisticsData.planningNo'>0</i></span></p>
			</div>
		</div>
		<div class="electricPile-model right">
			<div class="model-head">
				<p class="electricPile-title">
					充电设备实时状态总览 
					<a data-target="#" href="javascript:;" ui-sref="0000000001.warnReportManage" id="warnReportManage" class="trouble-report">故障报告</a>
				</p>
				<p class="total-electricPile mt10">充电设备枪口数：<span ng-bind='statisticsData.chargerTotal'>0</span></p>
			</div>
			<div style="width: 100%; height: 408px; margin-top: 20px;">
				<div id="allElectricPileState" style="width: 100%; height: 408px;">
				
				</div>
			</div>
		</div>
		<div class="electricPile-model">
			<div class="model-head">
					<p class="electricPile-title">历史故障桩</p>
			</div>
			<div style="width: 100%; height: 258px; margin-top: 20px;">
				<div id="allErrorPileCount" style="width: 100%; height: 258px;">
				
				</div>
			</div>
		</div>
		<div class="electricPile-model right">
			<div class="dc-electricPile">
				<div class="model-head">
					<p class="electricPile-title">直流充电设备实时状态总览</p>
					<p class="total-electricPile mt10">充电设备枪口数：<span ng-bind='statisticsData.chargerTotalD'>0</span></p>
				</div>
				<div style="width: 100%; height: 200px; margin-top: 20px;">
					<div id="allDCElectricPileState" style="width: 100%; height: 200px;">
					
					</div>
				</div>
			</div>
			<div class="ac-electricPile">
				<div class="model-head">
					<p class="electricPile-title">交流充电设备实时状态总览</p>
					<p class="total-electricPile mt10">充电设备枪口数：<span ng-bind='statisticsData.chargerTotalA'>0</span></p>
				</div>
				<div style="width: 100%; height: 200px; margin-top: 20px;">
					<div id="allACElectricPileState" style="width: 100% ;height: 200px;">
					
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--充电相关-->
<div class="content-model">
	<div class="model-title">
		<span class="title-left">充电数据</span>
		<span class="title-right">CHARGING RELATED</span>
	</div>
	<div class="model-content">
		<div style="overflow: hidden;">
		<div class="charge-capacity">
			<div class="charge-capacity-left">
				<p class="charge-capacity-title">
					<span class="color-deepblue">全国</span>充电量：<span class="charge-capacity-total"><i ng-bind='allChargeCapacity.chargeQuantity'>0</i>kW·h</span>
				</p>
				<div class="all-charge-capacity">
					<div id="allChargeCapacity" style="width: 100%; height: 380px;">
						
					</div>
				</div>
				<div class="all-dcorac-charge-capacity">
					<div id="allDCOrACChargeCapacity" style="width: 100%; height: 380px;">
						
					</div>
				</div>
			</div>
			<div class="charge-capacity-right">
				<p class="charge-capacity-title">
					<input type="text" class="getTime capacity-date" ng-model="allChargeCapacity_startDate" ng-change='getAllChargeInfoByDate();' /> ~ <input type="text" class="getTime capacity-date" ng-model="allChargeCapacity_endDate" ng-change='getAllChargeInfoByDate();' />
				</p>
				<p class="charge-capacity-title" style="margin-top: 35px;">
					总充电次数：<span class="charge-capacity-total"><i ng-bind='allChargeCapacity.chargeTimes'>0</i>次</span>
				</p>
				<ul class="electricPile-last-list">
					<li>
						<p>直流充电设备</p>
						<p>
							<span class="orange-bar" style="width: {{allChargeTimesDPercent}};"></span>
							<span class="color-orange34"><i ng-bind='allChargeCapacity.chargeTimesD'>0</i>次</span>
						</p>
					</li>
					<li>
						<p>交流充电设备</p>
						<p>
							<span class="deepbule-bar" style="width: {{allChargeTimesAPercent}};"></span>
							<span class="color-deepblue"><i ng-bind='allChargeCapacity.chargeTimesA'>0</i>次</span>
						</p>
					</li>
				</ul>
				<p class="charge-capacity-title">
					平均每次充电量：<span class="charge-capacity-total"><i ng-bind='allChargeCapacity.chargeQuantityPer'>0</i>kW·h</span>
				</p>
				<ul class="electricPile-last-list">
					<li>
						<p>直流充电设备</p>
						<p>
							<span class="orange-bar" style="width: {{allChargeQuantityPerDPercent}};"></span>
							<span class="color-orange34">¥<i ng-bind='allChargeCapacity.chargeQuantityPerD'>0</i></span>
						</p>
					</li>
					<li>
						<p>交流充电设备</p>
						<p>
							<span class="deepbule-bar" style="width: {{allChargeQuantityPerAPercent}};"></span>
							<span class="color-deepblue">¥<i ng-bind='allChargeCapacity.chargeQuantityPerA'>0</i></span>
						</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="charge-capacity" style="margin-top: 15px;">
			<p class="charge-capacity-title">
				<span class="color-deepblue" ng-bind="cityChargeCapacity_cityName">成都</span>充电量：<span class="charge-capacity-total"><i ng-bind='cityChargeCapacity.chargeQuantity'>0</i>kW·h</span>
				<span class="charge-capacity-select">
					<select class="model-select" name="cityChargeCapacity_province" ng-model="cityChargeCapacity_province" ng-change="getCityChargeInfoByDate(0)">
						<option value="all">选择省</option>
						<option ng-repeat="item in allProvince" value="{{item.province_code}}" ng-bind="item.province_name"></option>
					</select>
					<select class="model-select" name="cityChargeCapacity_city" ng-model="cityChargeCapacity_city" ng-change="getCityChargeInfoByDate(1)">>
						<option value="all" selected="selected">选择市</option>
						<option ng-repeat="item in allCity" value="{{item.city_code}}" ng-bind="item.city_name"></option>
					</select>
					<input type="text" class="capacity-date getTime" name="cityChargeCapacity_startDate" ng-model="cityChargeCapacity_startDate" ng-change="getCityChargeInfoByDate(2)"/> ~ <input type="text" ng-model="cityChargeCapacity_endDate" name="cityChargeCapacity_endDate" class="capacity-date getTime" ng-change="getCityChargeInfoByDate(3)"/>
				</span>
			</p>
			<div class="charge-capacity-left">
				<div id="cityChargeCapacity" class="all-charge-capacity">
					
				</div>
				<div id="cityDCOrACChargeCapacity" class="all-dcorac-charge-capacity">
					
				</div>
			</div>
			<div class="charge-capacity-right">
				<p class="charge-capacity-title">
					总充电次数：<span class="charge-capacity-total"><i ng-bind='cityChargeCapacity.chargeTimes'>0</i>次</span>
				</p>
				<ul class="electricPile-last-list">
					<li>
						<p>直流充电设备</p>
						<p>
							<span class="orange-bar" style="width: {{cityChargeTimesDPercent}};"></span>
							<span class="color-orange34"><i ng-bind='cityChargeCapacity.chargeTimesD'>0</i>次</span>
						</p>
					</li>
					<li>
						<p>交流充电设备</p>
						<p>
							<span class="deepbule-bar" style="width: {{cityChargeTimesAPercent}};"></span>
							<span class="color-deepblue"><i ng-bind='cityChargeCapacity.chargeTimesA'></i>次</span>
						</p>
					</li>
				</ul>
				<p class="charge-capacity-title">
					平均每次充电量：<span class="charge-capacity-total"><i ng-bind='cityChargeCapacity.chargeQuantityPer'></i>kW·h</span>
				</p>
				<ul class="electricPile-last-list">
					<li>
						<p>直流充电设备</p>
						<p>
							<span class="orange-bar" style="width: {{cityChargeQuantityPerDPercent}};"></span>
							<span class="color-orange34">¥<i ng-bind='cityChargeCapacity.chargeQuantityPerD'></i></span>
						</p>
					</li>
					<li>
						<p>交流充电设备</p>
						<p>
							<span class="deepbule-bar" style="width: {{cityChargeQuantityPerAPercent}};"></span>
							<span class="color-deepblue">¥<i ng-bind='cityChargeCapacity.chargeQuantityPerA'></i></span>
						</p>
					</li>
				</ul>
			</div>
		　</div>
		</div>
		<product-summary>
		</product-summary>
	</div>
</div>
<!--减少碳排放-->
<div class="content-model">
	<div class="model-title">
		<span class="title-left">节能减排</span>
		<span class="title-right">REDUCE CARBON EMISSIONS</span>
	</div>
	<div class="model-content">
		<div class="carbon-reduce-num">
			<p>共减少碳排放：</p>
			<p><span ng-bind="allCarbonDecrease">0</span><i>kg</i></p>
		</div>
		<img src="assets/img/carbon_1.png" class="carbon-img" />
		<div class="carbon-reduce-tree">
			<p><span ng-bind="allCarbonDecreaseForTree">0</span>颗树木一年的吸收量</p>
			<img src="assets/img/carbon_2.png" />
		</div>
		<img src="assets/img/carbon_1.png" class="carbon-img" />
		<div class="carbon-reduce-tree">
			<p><span ng-bind="allCarbonDecreaseForCar">0</span>辆汽车一天的排放量</p>
			<img src="assets/img/carbon_3.png" />
		</div>
		<img src="assets/img/carbon_1.png" class="carbon-img" />
		<div class="carbon-reduce-tree last">
			<p>让<span ng-bind="allCarbonDecreaseForPeople">0</span>人有了新鲜空气</p>
			<img src="assets/img/carbon_4.jpg" />
		</div>
	</div>
</div>
<script>
$('.getTime').datetimepicker({
	language: 'zh-CN',
	pickTime: false,
	todayBtn: true,
	autoclose: true,
	minView: '2',
	forceParse: false,
	format: "yyyy-mm-dd"
});
</script>
</div>	
</div>		
</body>
</html>
